﻿@model SimplCommerce.Module.Comments.Areas.Comments.ViewModels.CommentVm

<link simpl-append-version="true" rel="stylesheet" href="~/_content/SimplCommerce.Module.Comments/comment.css" />
<script simpl-append-version="true" src="~/lib/pagination/dirPagination.js"></script>
<script simpl-append-version="true" src="~/_content/SimplCommerce.Module.Comments/comment.js"></script>
<script simpl-append-version="true" src="~/_content/SimplCommerce.Module.Comments/comment-service.js"></script>
<script>
    simplCommentEntity = { entityId: @Model.EntityId, entityTypeId: '@Model.EntityTypeId' };
</script>

<div class="comments" ng-app="simpl.comment" ng-controller="CommentCtrl as vm" ng-cloak">
    @if(User.Identity.IsAuthenticated)
    {
        <form name="commentForm" novalidate>
            <div class="form-group">
                <textarea rows="3" required ng-maxlength="300" class="form-control" name="content" ng-model="vm.comment.commentText" placeholder="@Localizer["Your comment"]"></textarea>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <p class="comment-guide">@Localizer["Your comment should not have personal information. 10 - 300 characters:"] {{vm.comment.commentText.length}}</p>
                </div>
                <div class="form-group col-md-3">
                    <button type="submit" ng-disabled="commentForm.$invalid || vm.comment.commentText.length < 10" class="btn btn-secondary pull-right" ng-click="vm.saveComment()">@Localizer["Add Comment"]</button>
                </div>
            </div>
        </form>
    }
    else
    {
        var localizedTextParts = Localizer["Please <a>login</a> or <a>register</a> to submit your questions."].GetTextPartsFunction("<a>", "</a>");
        <p>@localizedTextParts(0)<a href="~/login?ReturnUrl=@Context.Request.Path#comments">@localizedTextParts(1)</a>@localizedTextParts(2)<a href="~/register?ReturnUrl=@Context.Request.Path#comments">@localizedTextParts(3)</a>@localizedTextParts(4)</p>
    }
    <div class="row">
        <div class="col-md-6">
            {{vm.commentCount}} @Localizer["Comments"]
            <a class="anchorjs-link " href="#comments" aria-label="Anchor" data-anchorjs-icon="#"></a>
        </div>
        <div class="col-md-6">
            <div class="form-group has-search pull-right">
                <span class="fa fa-search form-control-feedback"></span>
                <input class="form-control" ng-model="vm.search" placeholder="@Localizer["find by commenter"]" />
            </div>
        </div>
    </div>
    <hr />
    <div id="comments-list" class="comment-item-list">
        <div dir-paginate="item in vm.comments | itemsPerPage: 10" total-items="vm.commentCount" current-page="vm.pagination.current">
            <div class="commenter-name">
                <span class="badge badge-info" ng-if="item.status != 'Approved'">{{item.status}}</span>
                {{item.commenterName}}
            </div>
            <div class="">{{item.commentText}}</div>
            <div>
                <span class="r-time">{{item.createdOnRelative}}</span>
                - <a data-toggle="collapse" href="#reply{{item.id}}" ng-click="vm.addReply(item)" role="button" aria-expanded="false" aria-controls="reply{{item.id}}">@Localizer["Reply"]</a>
            </div>
            <div class="comment-reply">
                <div ng-repeat="childItem in item.replies">
                    <div class="commenter-name">
                        <span class="badge badge-info" ng-if="childItem.status != 'Approved'">{{childItem.status}}</span>
                        {{childItem.commenterName}}
                    </div>
                    <div class="">{{childItem.commentText}}</div>
                    <div>
                        <span class="r-time">{{childItem.createdOnRelative}}</span>
                        - <a data-toggle="collapse" href="#reply{{item.id}}" ng-click="vm.addReply(item)" role="button" aria-expanded="false" aria-controls="reply{{item.id}}">@Localizer["Reply"]</a>
                    </div>
                </div>
                <div class="collapse" id="reply{{item.id}}">
                    @if(User.Identity.IsAuthenticated)
                    {
                        <form novalidate name="replyForm">
                            <div class="form-group">
                                <textarea required ng-maxlength="300" rows="3" class="form-control" name="content" ng-model="item.newReply.commentText" placeholder="@Localizer["Your comment"]"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-9">
                                    <p class="comment-guide">@Localizer["Your comment should not have personal information. 10 - 300 characters:"] {{item.newReply.commentText.length}}</p>
                                </div>
                                <div class="form-group reply-btn col-md-3">
                                    <button type="submit" ng-disabled="replyForm.$invalid || item.newReply.commentText.length < 10" class="btn btn-secondary pull-right" ng-click="vm.saveReply(item)">@Localizer["Add Reply"]</button>
                                </div>
                            </div>
                        </form>
                    }
                    else
                    {
                        var localizedTextParts = Localizer["Please <a>login</a> or <a>register</a> to reply."].GetTextPartsFunction("<a>", "</a>");
                        <p>@localizedTextParts(0)<a href="~/login?ReturnUrl=@Context.Request.Path#comments">@localizedTextParts(1)</a>@localizedTextParts(2)<a href="~/register?ReturnUrl=@Context.Request.Path#comments">@localizedTextParts(3)</a>@localizedTextParts(4)</p>
                    }
                </div>
            </div>
        </div>
        <dir-pagination-controls on-page-change="vm.pageChanged(newPageNumber)" template-url="@Url.Content("~/lib/pagination/dirPagination.tpl.html")"></dir-pagination-controls>
    </div>
</div>
